<template>
    <div>
        <div class="main container">
            <div class="m-page">
                <div class="page-content">
                    <div class="c-title">发布需求</div>
                    <div class="c-box">
                        <div class="box-item">
                            <div class="item-left">选择您需要的类型*</div>
                            <div class="item-right">
                                <ul>
                                    <li :class="{'on':index===type_num}" v-for="(item,index) in type" :key="index" @click="select_type(index)">{{item}}</li>
                                </ul>
                            </div>
                        </div>
                        <div class="box-item">
                            <div class="item-left">选择您需要的子类型*</div>
                            <div class="item-right">
                                <ul>
                                    <li :class="{'on':index===type_child_num}" v-for="(item,index) in type_child" :key="index" @click="select_child_type(index)">{{item}}</li>
                                </ul>
                            </div>
                        </div>
                        <div class="box-item">
                            <div class="item-left">一句话需求*</div>
                            <div class="item-right">
                                <el-input type="textarea" :rows="6" placeholder="请输入需求" v-model="need">
                                </el-input>
                            </div>
                        </div>
                        <div class="box-item">
                            <div class="item-left">一句话需求*</div>
                            <div class="item-right">
                                <el-input type="textarea" :rows="6" placeholder="详细需求" v-model="need_detail">
                                </el-input>
                            </div>
                        </div>
                        <div class="box-item">
                            <div class="item-left">您的预算*</div>
                            <div class="item-right">
                                <el-select v-model="value" placeholder="请选择">
                                    <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="box-agreement">
                            <el-checkbox v-model="checked">同意XXXX协议</el-checkbox>
                        </div>
                        
                    </div>
                    <div class="c-btn">
                        <el-button type="primary">提交需求</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            type:['法律','法律','广告','财税'],
            type_num:'',//选中的类型
            type_child:['小程序开发','app开发','手机网站','企业网站'],
            type_child_num:'',//选中的子类型
            need:'',//一句话需求
            need_detail:'',//详细需求
            options: [{
                value: '5000~10000',
                label: '5000~10000'
            }, {
                value: '10000~20000',
                label: '10000~20000'
            },],
            value: '',
            checked:false,//是否同意协议
        }
    },
    methods:{
        //选择类型
        select_type(index){
            this.type_num=index;
        },
        //选择子类型
        select_child_type(index){
            this.type_child_num=index;
        }
    }
}
</script>
<style>
.el-select{
    width: 100%
}
.el-button--primary{
    padding: 12px 31px;
}
</style>

<style lang="less">
.m-page{
    padding: 93px 37px;
    font-size: 16px;
    color: #333;
    font-family:MicrosoftYaHei;
    font-weight:400;
    .page-content{
        background: #fff;
        padding: 80px 202px 70px 40px;
        .c-title{
            font-size: 20px;
            font-weight:bold;
        }
        .c-box{
            margin-top: 40px;
            .box-item{
                text-align: right;
                margin-top: 30px;
                &>div{
                    display: inline-block;
                }
                .item-left{
                    color: #666666;
                    margin-right: 10px;
                    vertical-align: top;
                }
                .item-right{
                    width: 600px;
                    display: inline-block;
                    &>ul{
                        display: flex;
                        li{
                            flex: 1;
                            margin-right: 40px;
                            text-align: center;
                            height: 32px;
                            line-height: 32px;
                            background: #D7D7D7;
                            border-radius: 4px;
                            &.on{
                                color: #fff;
                                background: #1575F9;
                            }
                            &:last-child{
                                margin-right: 0;
                            }
                        }
                    }
                    
                }
            }
            .box-agreement{
                padding-left: 195px;
                margin-top: 20px;
            }
        }
        .c-btn{
            text-align: center;
            margin-top: 100px;
        }
    }
}

    
</style>
